<template>
  <el-card>
    <template #header>
      About Me
    </template>
    <div class="about-content">
      <el-row class="avatar-message-box">
        <el-image lazy class="avatar"
                  :src="avatar"></el-image>
        <h3>{{Information.nickName}}</h3>
        <h6></h6>
      </el-row>
      <el-row>
        <div class="user-bio-section-header">
          <el-icon>
            <Collection/>
          </el-icon>
          <span>Education</span>
        </div>
        <el-divider class="divider"/>
        <Mallki class="education" class-name="mallki-text" :text="Information.signature"></Mallki>
      </el-row>

      <div class="kills-box">
        <div class="user-bio">
          <div class="user-skills user-bio-section">
            <div class="user-bio-section-header">
              <el-icon>
                <Tickets/>
              </el-icon>
              <span>Skills</span></div>
            <el-divider class="divider"/>
            <div class="user-bio-section-body">
              <div class="progress-item">
                <span>Vue</span>
                <el-progress :percentage="70"/>
              </div>
              <div class="progress-item">
                <span>JavaScript</span>
                <el-progress :percentage="18"/>
              </div>
              <div class="progress-item">
                <span>Css</span>
                <el-progress :percentage="12"/>
              </div>
              <div class="progress-item">
                <span>ESLint</span>
                <el-progress :percentage="100" status="success"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {
  Collection,
  Tickets
} from '@element-plus/icons-vue'
import Mallki from '../../../components/TextHoverEffect/Mallki.vue'
import {useStore} from "vuex";
import {computed} from "vue";

const store = useStore();
const avatar = computed(()=> store.state.user.avatar);
const Information = computed(()=>{
  return store.getters["user/getUserInformation"];
})
</script>

<style scoped>
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 60px;
}

.avatar-message-box {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.avatar-message-box > h3 {
  margin-top: 8px;
  font-weight: bold;
}

.avatar-message-box > h6 {
  color: gray;
}

.divider {
  margin: 8px 0 !important;
}

.kills-box {
  margin-top: 16px;
  width: 100%;
}
</style>